<template>
  <div>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in img" :key="index">
        <img :src="item.main_image" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- 今日上新 -->
    <div>
      <img
        class="img"
        src=""
        alt
      />
    </div>

    <div v-for="(ite,idx) in news[0].events" :key="idx" class="event-item">
      <a href="#">
        <img :src="ite.imageUrl" alt />
        <div class="event-info">
          <span class="event-brand">{{ite.englishName}}</span>
          <span class="event-name">{{ite.chineseName}}</span>
          <span class="event-discount">{{ite.discountText}}</span>
        </div>
      </a>
    </div>
    <!--热卖品牌 -->
    <div>
      <img
        class="img"
        src=""
        alt
      />
    </div>

    <div v-for="(ite,idx) in news[1].events" :key="idx" class="event-item">
      <a href="#">
        <img :src="ite.imageUrl" alt />
        <div class="event-info">
          <span class="event-brand">{{ite.englishName}}</span>
          <span class="event-name">{{ite.chineseName}}</span>
          <span class="event-discount">{{ite.discountText}}</span>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
import { getGoodsBanner } from "../api/goods";
import { getGoodsNews } from "../api/goods";
export default {
  data() {
    return {
      img: [],
      news: [],
    };
  },
  async created() {
    //获取轮播图数据
    let res = await getGoodsBanner();
    console.log(res);
    this.img = res.data.banners;

    //获取推荐下面的今日上新以及热卖品牌
    let ress = await getGoodsNews();
    console.log(ress);
    this.news = ress.data.lists;
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.img {
  display: block;
  width: 131px;
  height: 21px;
  margin: 20px 0 15px 20px;
}
.event-item {
  width: 22.2rem;
  height: 12.52rem;
  overflow: hidden;
  margin: 0px auto 1.1rem;
  position: relative;
}
.event-item img {
  display: block;
  width: 100%;
  height: 100%;
}
.event-info {
  width: 21rem;
  height: 5rem;
  position: absolute;
  left: 0;
  bottom: -20px;
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  padding: 0 0 0px 20px;
}
.event-brand {
  display: block;
  margin-bottom: 1rem;
  text-transform: uppercase;
  line-height: 0.426667rem;
  font-size: 0.426667rem;
  color: #fff;
}
.event-name {
  display: block;
  margin-bottom: 1rem;
  height: 0.373333rem;
  line-height: 0.373333rem;
  font-size: 0.373333rem;
  color: #fff;
}
.event-discount {
  display: block;
  margin-bottom: 1rem;
  height: 0.373333rem;
  line-height: 0.373333rem;
  font-size: 0.373333rem;
  color: #fff;
}
</style>